<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Money } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import axios from "@/request";
import SmoothSignature from "smooth-signature";

const route = useRoute();
const router = useRouter();
const signaturePad = ref(null);
const name = route.query.name;
const orderId = route.query.id;
const dialogVisible = ref(false);
const toggleRotate = ref(true);
const canvas = ref(null);
const width = window.innerWidth;
const height = window.innerHeight;
const options = reactive({
  // 设置宽度和高度，根据横竖屏切换调整
  width: width - 20,
  height: height - 30,
  scale: 2,
  minWidth: 4,
  maxWidth: 10,
  color: "#000000",
  // bgColor: '#efefef'
});

//清除
const clear = () => {
  signaturePad.value.clear();
};
/**
 * 撤销
 */
const onUndo = () => {
  signaturePad.value.undo();
};
/**
 * 获取png
 */
const onGetPNG = () => {
  const isEmpty = signaturePad.value.isEmpty();
  if (isEmpty) {
    ElMessage({
      message: "请签名.",
      type: "warning",
    });
    return;
  }
  let pngUrl = signaturePad.value.getPNG();
  return pngUrl;
};

/**
 * 保存
 */
const save = () => {
  let data = onGetPNG();
  let body = {
    orderId,
    signature: data,
  };
  axios
    .put(`/api/contract/signature/${orderId}`, body)
    .then((result) => {
      const { status } = result;
      if (status === 200) {
        ElMessage({
          message: "签名成功.",
          type: "success",
        });
        router.push("/orderSignature?id=" + orderId);
      }
    })
    .catch((err) => {});
};

const onSwitchover = () => {
  dialogVisible.value = true;
};

// 初始化签名板
const initSignaturePad = (el, options) => {
  signaturePad.value = new SmoothSignature(el, options);
};

/**
 * 切换横竖屏
 */
const handleOrientationChange = () => {
  toggleRotate.value = !toggleRotate.value;
  if (toggleRotate.value) {
    // 横屏
    options.width = window.innerWidth;
    options.height = window.innerHeight;
  } else {
    //竖屏
    options.width = window.innerWidth;
    options.height = window.innerHeight - 500;
  }
  signaturePad.value = new SmoothSignature(canvas.value, options);
  if (toggleRotate.value) {
    signaturePad.value.getRotateCanvas(-90);
  } else {
    signaturePad.value.getRotateCanvas(0);
  }
};

onMounted(() => {
  document.title = "签字";
  // 竖屏
  // options.width = window.innerWidth;
  // options.height = window.innerHeight - 500;
  // 横屏
  options.width = window.innerWidth;
  options.height = window.innerHeight;
  initSignaturePad(canvas.value, options);
});
</script>

<template>
  <div :class="['signature_view', toggleRotate ? 'signature_pad_rotate' : '']">
    <div class="signature_name">
      <p style="font-size: 16px; padding: 20px">请按如下文字签字</p>
      <p style="font-size: 18px; text-align: center">
        <b>{{ name }}</b>
      </p>
    </div>
    <canvas ref="canvas"></canvas>
    <div class="signature_operation">
      <el-button style="width: 80px" @click="clear" type="primary"
        >重签</el-button
      >
      <el-button style="width: 80px" @click="save" type="primary"
        >提交</el-button
      >
      <!-- <el-button style="width: 80px" @click="handleOrientationChange"
        >切换</el-button
      > -->
    </div>
  </div>
</template>

<style scoped>
.signature_view {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.signature_view canvas {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.signature_name {
  padding-bottom: 20px;
}
.signature-pad {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.signature_operation {
  padding: 20px;
  text-align: center;
  margin: auto;
}
.signature_pad_rotate .signature_name {
  position: absolute;
  transform: rotate(90deg) translateX(-50%) translateY(-50%);
  top: 50%;
  right: 20px;
  width: 200px;
  text-align: center;
}
.signature_pad_rotate .signature_operation {
  position: absolute;
  transform: rotate(90deg) translateX(-50%) translateY(-50%);
  /* bottom: 0; */
  right: 210px;
  width: 300px;
  text-align: center;
}
</style>
